<style lang="scss" scoped="">
	@import '../style.scss';


</style>
<template>
  <div class='my_card_outer_b' style="height:44vh;">
    <div class='my_card_b' style="height:42vh;" >

      <div style="height:37vh;width:45vw" ref="myEchart">


      </div>
    </div>

  </div>


</template>

<script>
	import echarts from 'echarts'
	import config from '../config.js'
	export default {
		name: 'b_tenant_detail_dim',
		data() {
			return {
				data: 0
			}

		},
		watch: {
			test: function(val, oldVal) {

				this.initChart(val)
			}
		},
		computed: {
			test() {
				return this.$store.state.selected_tenant;
			}
		},
		mounted() {

		},
		methods: {
			initChart(tenant_data) {
			  console.log('init');
				let hv = document.body.clientHeight / 100;
				var myChart = echarts.init(this.$refs.myEchart);


				var option = getOption();
				option.series[0].data[0].value= [
					Math.round(tenant_data['util_dim_score']),
					Math.round(tenant_data['reason_dim_score']),
					Math.round(tenant_data['economy_dim_score']),
					Math.round(tenant_data['tech_dim_score']),
					Math.round(tenant_data['strategy_dim_score'])
				]
        option.series[0].data[1].value= [
          this.$store.state.general_data.dim_general.mean['util_dim_score'],
          Math.round(this.$store.state.general_data.dim_general.mean['reason_dim_score']),
          Math.round(this.$store.state.general_data.dim_general.mean['economy_dim_score']),
          Math.round(this.$store.state.general_data.dim_general.mean['tech_dim_score']),
          Math.round(this.$store.state.general_data.dim_general.mean['strategy_dim_score'])
        ]
//        option.series[0].data[0].value= [
//          65,76,65,67,74
//        ]
				myChart.setOption(option, true);
			}
		},

	}




	function getOption() {
		let hv = document.body.clientHeight / 100;
		var option = {

			legend: {
				left: 1 * hv,
				orient: 'vertical',
				textStyle: {
					color: '#000'
				},
				data: ['租户', '整体']
			},
			radar: {
				radius: '85%',
				startAngle: 145,
				name: {
					textStyle: {
						color: '#000',
						borderRadius: 8,
						fontSize: hv * 1.5
					}
				},
				nameGap: 2 * hv,
				splitArea: {
					show: false
				},
				splitLine: {
					lineStyle: {
						color: [
							'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.2)',
							'rgba(0, 0, 0, 0.4)', 'rgba(0, 0, 0, 0.6)',
							'rgba(0, 0, 0, 0.8)', 'rgba(0, 0, 0, 1)'
						].reverse()
					}
				},
				splitArea: {
					show: false
				},
				axisLine: {
					lineStyle: {
						color: 'rgba(0, 0, 0, 0.5)'
					}
				},
				indicator: [{
						name: '资源利用',
						max: 100
					},
					{
						name: '资源分配',
						max: 100
					},
					{
						name: '经济产值',
						max: 100
					},
					{
						name: '科技产值',
						max: 100
					},
					{
						name: '战略意义',
						max: 100
					}
				]
			},
			series: [{
				name: '预算 vs 开销',
				type: 'radar',
				// areaStyle: {normal: {}},
				data: [{
						value: [67, 76, 54, 65, 76],
						name: '租户',
						itemStyle: {
							color: config.colork['orange']
						}
					},
					{
						value: [76, 76, 54, 86, 76],
						itemStyle: {
							color: config.color[1]
						},
						name: '整体'
					}
				]
			}]
		};
		return option;
	}
</script>
